<template>
  <div>
    <div id="main-wrapper">
      <div id="main-navbar" class="navbar navbar-inverse main_navbar" role="navigation">
        <!-- <button type="button" id="main-menu-toggle">
                    <i class="navbar-icon fa fa-bars icon"></i>
                    <span class="hide-menu-text">隐藏菜单</span>
                </button> -->
        <div class="navbar-inner">
          <div class="navbar-header">
            <i class="icon iconfont icon-multilayer"></i>
            <a href="http://hsedu.iclass.cn/edu/back/index.html" class="navbar-brand main_navbar--a">
              后台管理平台
            </a>

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse">
              <i class="navbar-icon fa fa-bars"></i>
            </button>
          </div>

          <div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
            <div>
              <div class="right clearfix">
                <ul class="nav navbar-nav pull-right right-navbar-nav">
                  <li class="dropdown">
                    <a class="dropdown-toggle user-menu" data-toggle="dropdown">
                      <span>admin</span>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="backloginout">
                          <i class="dropdown-icon fa fa-power-off"></i>&nbsp;&nbsp;退出</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="main-menu" role="navigation">
        <div class="slimScrollDiv welcome--wrap" style="position: relative; overflow: hidden; width: auto; height: 100%;">
          <div id="main-menu-inner" style="overflow: hidden; width: auto; height: 100%;">
            <div class="welcome">
              欢迎管理员
            </div>
            <ul class="navigation">
              <li class="mm-dropdown mm-dropdown-root open active">
                <a href="JavaScript:;">
                  <span class="mm-text mmc-dropdown-delay animated fadeIn">值班表管理</span>
                </a>
              </li>
              <li class="mm-dropdown mm-dropdown-root">
                <a href="JavaScript:;" @click="eject='ture';message=''">
                  <span class="mm-text mmc-dropdown-delay animated fadeIn">密码修改</span>
                </a>
              </li>

              <li class="mm-dropdown mm-dropdown-root">
                <a href="JavaScript:;">
                  <span class="mm-text mmc-dropdown-delay animated fadeIn" @click="cancellation">注销</span>
                </a>
                <ul class="mmc-dropdown-delay animated fadeInLeft">
                  <li>
                    <a tabindex="-1" href="http://hsedu.iclass.cn/edu/back/newslist">
                      <i class="menu-icon fa fa-cogs"></i>
                      <span class="mm-text">添加和设置</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 246px;"></div>
          <div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
        </div>
      </div>
      <div id="content-wrapper">

        <div class="row">
          <div class="col-sm-12">
            <div class="table-light table-borrow">
              <div class="table-header">
                <div class="table-caption" style="display:inline-block;">
                  值班管理表
                  <a href="javascript:;" class="btn btn-info up__load" id="btnAddOrganizeGroup" style="margin-left:15px;">
                    上传值班表
                    <input type="file" multiple @change="previewFile($event)" id="input" class="upinput">
                  </a>
                  <!-- <input type="file" @change="previewFile" ref="input"> -->
                </div>

              </div>

              <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-page" id="">
                <thead>
                  <tr>
                    <th style="width:5.5%;text-align:center">
                      <input type="checkbox" name="events" @click="select()">
                    </th>
                    <th style="width:5.5%">ID</th>
                    <th style="width:21%">值班表名称</th>
                    <th style="width:25%">创建时间</th>
                    <th style="width:5%">排序</th>
                    <th style="width:25%">操作</th>
                  </tr>
                </thead>
                <tbody>

                  <tr class="shown" v-for="(list,index) in wps" :key=index v-if="list.canShow===1">
                    <td class="organizeGroup-indexOrder" style="text-align:center">
                      <input type="checkbox" name="events" :id=list.id>
                    </td>
                    <td class="organizeGroup-groupName">
                      {{list.id}}
                      <!-- {{selecteda*20+index+1}} -->
                    </td>
                    <td class="organizeGroup-indexOrder" @click="tableNamec(list)">
                      <span>
                        {{list.filename}}
                      </span>
                      <!-- <input type="text" :value="list.filename" v-if="tableName===index" class="table--input" id="titleName"> -->
                    </td>
                    <td>
                      <a target="_blank">{{list.uploadTime | filterTime}}</a>
                    </td>
                    <td>
                      <input type="text" style="width:100%;text-align:center" :id="list.id.toString()+'sort'" class="sort" v-model="index" @keyup.enter="level=list;confirmation(index,list.id)" name="sort">
                    </td>
                    <td>
                      <a target="_blank" class="repeal repeal__bottom" style="background:red;color:white" @click="selfDel(list.id)">删除</a>
                      <a href="javascript:;" class="repeal organizeGroup-edit repeal__bottom" @click="see(list.id)">查看</a>
                      <!-- <a href="javascript:;" class="repeal organizeGroup-updateFreeze repeal__bottom" @click="eject='ture';level=list">编辑</a> -->

                    </td>
                  </tr>

                </tbody>
              </table>
              <div class="table-footer">

                <div class="div-page">
                  <ul class="pagination">
                    <li class="disabled page__list trans">
                      <i class="icon iconfont icon-youjiantou"></i>
                    </li>
                    <!-- active -->
                    <li class="disabled page__list" @click="go(index)" :class="{number:index===selecteda}" v-for="(list,index) in pages" :key="index">
                      {{list}}
                    </li>
                    <li class="active page__list">
                      <i class="icon iconfont icon-youjiantou"></i>
                    </li>
                    <li>
                      <a href="javascript:;" class="del" @click="wholeDel()">删除</a>
                    </li>
                  </ul>
                </div>

              </div>
            </div>
          </div>
        </div>

        <div id="main-menu-bg"></div>
      </div>
    </div>

    <div class="mask" v-show="eject||titleShow" @click="eject=false;titleShow=false">
    </div>

    <div class="eject" v-show="eject||titleShow">
      <p class="eject--top">
        <span v-if="eject">密码修改</span>
        <span v-else>标题修改</span>
        <i class="icon iconfont icon-chacha" @click="eject=false;titleShow=false"></i>
      </p>
      <div class="eject--input">
        <span v-if="eject">新密码:</span>
        <span v-else>新标题</span>
        <input type="text" v-model="message">
      </div>
      <div class="eject--bottom">
        <a href="javascript:;" @click="password()">确定</a>
        <a href="javascript:;" @click="eject=false;titleShow=false">取消</a>
      </div>

    </div>

  </div>
</template>

<script>
import jquery from "../assets/js/backStage/jquery.min.js";
import page from "../assets/js/backStage/page.js";
import { filterTime } from "../assets/js/filters";
// import  pixelAdmin from '../assets/js/backStage/pixel-admin.js';

export default {
  data() {
    return {
      wps: [],
      pageNum: 0,
      pages: "",
      selecteda: 0,
      arrId: [],
      eject: false, //弹出层
      level: "", //排序的序号
      message: "", //排序选择框
      tableName: 1,
      titleShow: false,
      list: "",
      a: ""
    };
  },
  created() {
    this.flipchart();
    this.dome();
  },
  methods: {
    //修改值班表名称
    tableNamec(list) {
      this.titleShow = true;
      this.list = list;
      this.message = this.list.filename;
    },
    //密码修改 //标题修改
    password() {
      if (this.titleShow) {
        this.$axios
          .get("/file/reName", {
            params: {
              id: this.list.id,
              name: this.message
            }
          })
          .then(res => {
            if (res.status === 200) {
              alert("标题修改成功");
              this.titleShow = false;
              this.dome();
            }
          });

        return;
      }
      this.$axios
        .get("/user/update", {
          params: {
            id: 1,
            name: "admin",
            password: this.message
          }
        })
        .then(res => {
          if (res.status === 200) {
            alert("密码修改成功");
            this.eject = false;
          }
        });
    },
    //回车确认排序
    confirmation(index, id) {
      var input = document.getElementById(id + "sort");
      input.blur();
      this.sort(index);
    },
    //注销
    cancellation() {
      sessionStorage.removeItem("logo");
      this.$router.push({
        name: "logo"
      });
    },
    //查看
    see(id) {
      this.$router.push({
        name: "DutyDetail",
        query: {
          id: id
        }
      });
    },
    //改变序号
    sort(i) {
      //   if (this.message === '') {
      //     alert('请输入序号')
      //     return
      //   }
      console.log(this.level.id, i);
      this.$axios
        .get("/file/edit", {
          params: {
            userId: 1,
            id: this.level.id,
            level: i
          }
        })
        .then(res => {
          this.eject = false;
          //成功更新数组
          this.dome();
        });
    },
    //跳转页
    go(index) {
      this.pageNum = index;
      this.selecteda = index;
      this.dome();
    },
    //翻页
    flipchart() {
      this.$axios
        .get("/file/sort", {
          params: {
            userId: 1,
            pageSize: 200000,
            pageNum: this.pageNum
          }
        })
        .then(res => {
          let zpage = Number(res.data.filePage.content.length / 20);
          this.pages = Math.ceil(zpage);
        });
    },
    //获取列表
    dome() {
      this.$axios
        .get("/file/sort", {
          params: {
            userId: 1,
            pageSize: 20,
            pageNum: this.pageNum
            // array: "sortLevel:desc" //uploadTime:desc
          }
        })
        .then(res => {
          var pageLenght = res.data.filePage.content.length;
          res.data.filePage.content.map(
            item => (item.model = res.data.filePage.content.length)
          );
          this.wps = res.data.filePage.content;
        });
    },

    //删除勾选的
    wholeDel() {
      this.arrId = [];
      var items = document.getElementsByName("events");
      for (var i = items.length; i > 1; i--) {
        var index = i - 1;
        if (items[index].checked) {
          items[index].checked = false;
          //   this.wps.splice(index - 1, 1)
          this.arrId.push(Number(items[index].id));
        }
      }
      this.selfDel(this.arrId.join(","));
    },
    //删除自己
    selfDel(list) {
      console.log(list, "fise");
      this.$axios
        .get("/file/delete", {
          params: {
            userId: 1,
            ids: list
          }
        })
        .then(res => {
          console.log(list);
          this.dome();
        });
    },
    //实现全选
    select() {
      var items = document.getElementsByName("events");
      console.log(items[2].id);
      if (items[0].checked) {
        for (var i = 1; i < items.length; i++) {
          //当前checkbox实现勾选
          items[i].checked = true;
          //   this.arrId.push(items[i].id)
        }
      } else {
        for (var i = 0; i < items.length; i++) {
          items[i].checked = false;
          //   this.arrId = []
        }
      }
    },
    //上传事件
    previewFile(e) {
      //   console.log(e.target.files)
      var formData = new FormData();
      //   formData.append('userId', '1')
      // var userId=user.id;
      var userId = 1;
      // formData.append("mydata", e.target.files[0]);
      for (var i = 0; i < e.target.files.length; i++) {
        formData.append("mydata" + i, e.target.files.item(i));
      }

      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      }; //添加请求头
      console.log(formData.get("mydata"), 1000);
      this.$axios.post("/file/upload/" + userId, formData, config).then(res => {
        //上传成功更新列表
        if (res.data === "success") {
          this.dome();
        }
      });
    }
  },
  //时间转换
  filters: {
    filterTime
  }
};
</script>

<style lang="scss" scoped>
.table-striped tbody tr:nth-of-type(odd) .table--input {
  background: #f0f0f1;
}
.table--input {
  width: 100%;
}
.tablenone {
  display: none;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11111111111111111111111;
  width: 100%;
  height: 100%;
}
.eject--bottom {
  text-align: center;
  a:nth-child(1) {
    border-color: #4898d5;
    background-color: #2e8ded;
    color: #fff;
  }
  a {
    height: 28px;
    line-height: 28px;
    margin: 0 6px;
    padding: 0 15px;
    border: 1px solid #dedede;
    background-color: #f1f1f1;
    color: #333;
    border-radius: 2px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
  }
}
.eject {
  width: 500px;
  height: 300px;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  position: fixed;
  background-color: #fff;
  z-index: 1111111111111;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -150px;
  &--top {
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    padding: 0 15px;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #f8f8f8;
    i {
      float: right;
    }
  }
  &--input {
    width: 400px;
    margin: 0 auto;
    height: auto;
    padding: 15px 0;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 80px;
    span {
      margin-right: 15px;
    }
    input {
      width: 200px;
      height: 35px;
      font-size: 14px;
      color: #4a4a4a;
      border: 1px solid #ecf0f1;
      border-radius: 4px;
      padding: 0 15px;
      display: inline-block;
    }
  }
}
.btn {
  position: relative;
}
.upinput {
  width: 106px;
  height: 31px;
  opacity: 0;
  position: absolute;
  left: 0;
}
.del {
  display: block;
  background: #097dd9;
  color: white;
  width: 78px;
  height: 29px;
  text-align: center;
  border-radius: 8px;
  line-height: 27px;
  margin-left: 15px;
}
.page__list {
  border: 1px solid #e4e4e4;
  width: 32px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.repeal__bottom {
  cursor: pointer;
}
.number {
  background: #097dd9;
  color: white;
  margin: 0 3px;
}
.trans {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* Internet Explorer */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg); /* Opera */
  line-height: 23px;
}
.welcome--wrap {
  padding-left: 20px !important;
  & {
    margin-top: 80px;
    color: white;
  }
}
.table-striped tbody tr:nth-of-type(odd) {
  .sort {
    background: #f0f0f1;
  }
}
</style>

